<template>
    <div class="totalMap-wrapper">
        <div id="map" :style="{ height: '3.2rem', width: '100%' }" ref="myEchart"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import tools from "./tools";
    const dalianJson = require("../../common/map/dalian.json")
    export default {
        name: 'totalMap',
        data(){
            return{
                no:1
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init() {
                let myChart = echarts.init(document.getElementById('map'));
                echarts.registerMap('dalian', dalianJson);
                let option = {
                    title: {
                        text: '设备分布地图',
                        left: 'center',
                        textStyle:{
                            color:'#257dff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter:  function(params) {
                            if(!params.value){
                                return '该地区暂无设备';
                            }
                            return params.seriesName+'<br />'+params.name+'：'+params.value+'台'
                        },
                        confine: true
                    },
                    // visualMap: {
                    //     min: 0,
                    //     max: 100,
                    //     text: ['高', '低'],
                    //     realtime: false,
                    //     calculable: true,
                    //     itemWidth:10,
                    //     itemHeight: 70,
                    //     inRange: {
                    //         color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                    //     }
                    // },
                    series: [
                        {
                            name: '',
                            type: 'map',
                            // zoom: 1.4,
                            label: {
                                show: true,
                            },
                            mapType: 'dalian', // 自定义扩展图表类型
                            itemStyle: {
                                // normal: {label: {show: true}},
                                emphasis: {label: {show: true,
                                        textStyle: {
                                            color: '#eee'
                                        }
                                    },
                                    areaColor: '#33cea0',
                                },
                                normal:{
                                    areaColor: '#257dff',
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#eee'
                                        }
                                    },
                                },
                            },
                            data: [{
                                    name:'庄河市',
                                    value:0
                                },
                                {
                                    name:'普兰店区',
                                    value:0
                                },
                                {
                                    name:'瓦房店市',
                                    value:0
                                },
                                {
                                    name:'长海县',
                                    value:0
                                },
                                {
                                    name:'金州区',
                                    value:0
                                },
                                {
                                    name:'甘井子区',
                                    value:0
                                },
                                {
                                    name:'沙河口区',
                                    value:0
                                },
                                {
                                    name:'中山区',
                                    value:0
                                },
                                {
                                    name:'旅顺口区',
                                    value:0
                                },
                            ]
                        }
                    ]
                };
                // option.title.text = data.title;
                // option.visualMap.max = data.max;
                // option.series[0].name = data.name;
                // option.series[0].data = data.data;

                myChart.setOption(option);
                tools.autoHover(myChart, option, 9, 3000);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

        }
    }
</script>
